<template>
	<view class="my-page">
		<view class="head-box">
			<view class="head">
				<view class="head-left">
					<view class="name">
						{{userinfo.nickname ||''}}
					</view>
					<view class="mail">
						<view>
							{{userinfo.mobile}}
						</view>
						<view class="grade">
							<view class="vip" >
								1
							</view>
						</view>
					</view>
				</view>
				<u--image :showLoading="true" src="/static/my/notice.png" width="60rpx" height="60rpx"></u--image>
			</view>
		</view>
		<view class="content-box">
			<view class="balance">
				<view class="property">
					<view class="property-left">
						<view class="property-text">
							总资产 / USDT
						</view>
						<view class="property-num">
							<text v-if="isShow">{{userinfo.usd}}</text>
							<text v-else>******</text>
							<u--image v-if="isShow" :showLoading="true" src="/static/ai/eye0.png" width="36rpx"
								height="36rpx" @click="isEye"></u--image>
							<u--image v-else :showLoading="true" src="/static/ai/eye1.png" width="36rpx" height="36rpx"
								@click="isEye"></u--image>
						</view>
					</view>
					<view class="property-btn">
						闪兑
					</view>
				</view>
				<view class="surplus">
					<view class="surplus-item">
						<view class="item-title">
							CBU余额
						</view>
						<view class="item-num">
							{{userinfo.cbu}}
						</view>
					</view>
					<view class="surplus-item">
						<view class="item-title">
							AI算力池余量
						</view>
						<view class="item-num">
							0.00
						</view>
					</view>
				</view>
				<view class="surplus">
					<view class="surplus-item">
						<view class="item-title">
							USDT余额
						</view>
						<view class="item-num">
							{{userinfo.usd}}
						</view>
					</view>
					<view class="surplus-item">
						<view class="item-detail">
							<view class="item-title">
								代币AIX余额
							</view>
							<view class="detail-text">
								积分兑换
							</view>
						</view>
						<view class="item-num">
							{{userinfo.aix}}
						</view>
					</view>
				</view>
			</view>
			<view class="income">
				<view class="income-item">
					<view class="income-num">
						$0.00
					</view>
					<view class="income-text">
						今日收益
					</view>
				</view>
				<view class="income-item">
					<view class="income-num">
						$0.00
					</view>
					<view class="income-text">
						本周收益
					</view>
				</view>
				<view class="income-item">
					<view class="income-num">
						$0.00
					</view>
					<view class="income-text">
						累计收益
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn-item">
					<u-button shape="circle" type="primary" text="充值"
						@click="gonavto('/pages/my/recharge/index')"></u-button>
				</view>
				<view class="btn-item">
					<u-button shape="circle" color="#0B0D1C" type="primary" text="提现"
						@click="gonavto('/pages/my/withdraw/index')"></u-button>
				</view>
			</view>
			<view class="about" @click="gonavto('/pages/my/about/index')">
				<u--image :showLoading="true" src="/static/my/about.jpg" width="100%" height="220rpx"
					mode="widthFix"></u--image>
			</view>
			<view class="service">
				<view class="service-title">
					更多服务
				</view>
				<view class="ability">
					<view class="ability-item" v-for="(item,index) in abilityList" :key="index"
						@click="gonavto(item.url)">
						<view class="item-img">
							<u--image :showLoading="true" :src="item.img" width="66rpx" height="66rpx"></u--image>
						</view>
						<view class="ability-text">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			<view class="exit" @click="goback()">
				<u--image :showLoading="true" src="/static/my/exit.png" width="36rpx" height="36rpx"></u--image>
				<text>退出登录</text>
			</view>
			<view class="line">

			</view>
		</view>
		<tabbar :value="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				userinfo: {},
				isShow: true,
				isvip: true,
				abilityList: [{
						text: '作品集',
						img: '/static/my/icon1.png',
						url: '/pages/my/works/index'
					},
					{
						text: '资产明细',
						img: '/static/my/icon2.png',
						url: '/pages/my/detail/index'
					},
					{
						text: '邀请好友',
						img: '/static/my/icon3.png',
						url: '/pages/my/invite/index'
					},
					{
						text: '算力集群',
						img: '/static/my/icon4.png',
						url: '/pages/my/colony/index'
					},
					{
						text: '安全中心',
						img: '/static/my/icon5.png',
						url: '/pages/my/center/index'
					},
					{
						text: '语言选择',
						img: '/static/my/icon6.png',
						url: ''
					},
					{
						text: '联系客服',
						img: '/static/my/icon7.png',
						url: ''
					},
					{
						text: '公告',
						img: '/static/my/icon8.png',
						url: '/pages/my/notice/index'
					},
					{
						text: '实名认证',
						img: '/static/my/icon9.png',
						url: ''
					},
				]
			}
		},
		onShow() {
			this.postuserinfo()
		},
		methods: {
			postuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.userinfo = res.data.data
					}
				})
			},
			goback() {
				uni.showModal({
					title: '提示',
					content: '是否退出登录！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url: '/pages/login/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			isEye() {
				this.isShow = !this.isShow
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.my-page {
		padding-bottom: 100rpx;
	}

	.head-box {
		background-color: #0B0D1C;
		height: 501rpx;
		padding-top: 10%;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.head-left {
				color: #ffffff;

				.name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.mail {
					font-size: 24rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.grade {
						font-size: 24rpx;
						color: #0C0C1B;

						.ordinary {
							padding: 5rpx 10rpx;
							border-radius: 20rpx;
							background-color: #ffffff;
							font-weight: 700;
						}

						.vip {
							background-image: url('/static/ecology/vip.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							width: 77.14rpx;
							height: 40rpx;
							padding-left: 25rpx;
							line-height: 35rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.content-box {
		padding: 30rpx;

		.balance {
			margin-top: -260rpx;
			color: #ffffff;
			padding: 30rpx;
			background: linear-gradient(270deg, #87BAFF 0%, #6897FF 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			.property {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(255, 255, 255, .2);
				margin-bottom: 30rpx;

				.property-left {
					.property-text {
						font-size: 28rpx;

					}

					.property-num {
						margin-top: 10rpx;
						display: flex;
						align-items: center;

						text {
							margin-right: 20rpx;
							font-weight: 700;
							font-size: 48rpx;
						}
					}
				}

				.property-btn {
					padding: 10rpx 40rpx;
					border-radius: 30rpx;
					background-color: #0B0D1C;
					font-size: 28rpx;
				}
			}

			.surplus {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				color: #ffffff;

				.surplus-item {
					width: 50%;

					.item-title {
						font-size: 28rpx;
					}

					.item-num {
						font-size: 36rpx;
						font-weight: 500;
					}

					.item-detail {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.detail-text {
							background-color: rgba(255, 255, 255, .16);
							border-radius: 30rpx;
							padding: 5rpx 10rpx;
							margin-left: 10rpx;
						}
					}
				}

			}
		}

		.income {
			background-color: #F6FAFF;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;

			.income-item {
				color: #333333;

				.income-num {
					font-size: 36rpx;
					font-weight: 700;
				}

				.income-text {
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}

		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.btn-item {
				width: 48%;
			}
		}

		.about {
			margin-top: 30rpx;
		}

		.service {
			background-color: #F6FAFF;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;

			.service-title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
			}

			.ability {
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.ability-item {
					width: 25%;
					margin-top: 30rpx;

					.item-img {
						display: flex;
						justify-content: center;
					}

					.ability-text {
						font-size: 24rpx;
					}
				}
			}
		}

		.exit {
			margin-top: 30rpx;
			background: linear-gradient(270deg, #87BAFF 0%, #6897FF 100%);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx;
			border-radius: 50rpx;
			color: #ffffff;
			font-weight: 700;
			font-size: 30rpx;

			text {
				margin-left: 10rpx;
			}
		}

		.line {
			height: 50rpx;
		}
	}
</style>